<template>
  <div>
    <UploadAvatar ref="su" @back="refresh"></UploadAvatar>
    <Row :gutter="16">
      <Col span="8">
        <Card title="个人资料">
          <p style="text-align: center">
            <Avatar :src="avatar" :size="80"/>
          </p>
          <p style="text-align: center"><a @click="show">修改头像</a></p>
          <CellGroup>
            <Cell title="用户名称" :extra="this.$store.state.user.userName">
              <Icon slot="icon" type="ios-contact" size="20"/>
            </Cell>
            <Cell title="手机" :extra="this.$store.state.user.mobile">
              <Icon slot="icon" type="ios-call" size="20"/>
            </Cell>
            <Cell title="邮箱" :extra="this.$store.state.user.email">
              <Icon slot="icon" type="ios-mail" size="20"/>
            </Cell>
            <Cell title="创建时间" :extra="this.$store.state.user.createDate">
              <Icon slot="icon" type="md-calendar" size="20"/>
            </Cell>
          </CellGroup>
        </Card>
      </Col>
      <Col span="16">
        <Card>
        <Tabs type="card">
          <TabPane label="基本信息">
            <Form ref="formItem" :model="formItem" :label-width="80">
              <FormItem label="用户名称" prop="name" :rules="{required: true, message: '用户名称不能为空', trigger: 'blur'}">
                <Input v-model="formItem.name" placeholder="请输入用户名称"></Input>
              </FormItem>
              <FormItem label="手机号码" prop="mobile" :rules="{required: true, message: '用户名称不能为空', trigger: 'blur'}">
                <Input type="tel" v-model="formItem.mobile" placeholder="请输入手机号码"></Input>
              </FormItem>
              <FormItem label="邮箱" prop="email" :rules="{required: true, message: '用户名称不能为空', trigger: 'blur'}">
                <Input type="email" v-model="formItem.email" placeholder="请输入邮箱"></Input>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="save">保存</Button>
              </FormItem>
            </Form>
          </TabPane>
          <TabPane label="修改密码">
            <Form ref="password" :model="password" :label-width="80">
              <FormItem label="旧密码" prop="password" :rules="{required: true, message: '旧密码不能为空', trigger: 'blur'}">
                <Input type="password" v-model="password.password" placeholder="请输入旧密码"></Input>
              </FormItem>
              <FormItem label="新密码"  prop="newPassword" :rules="pCheck">
                <Input type="password" v-model="password.newPassword" placeholder="请输入新密码"></Input>
              </FormItem>
              <FormItem label="确认密码"  prop="confimPassword" :rules="pwdCheck">
                <Input type="password" v-model="password.confimPassword" placeholder="请输入确认密码"></Input>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="update">修改</Button>
              </FormItem>
            </Form>
          </TabPane>
        </Tabs>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { updatePassword, updateUser } from '../../api/sys/user'
import UploadAvatar from './upload-avatar.vue'
import store from '@/store'
export default {
  name: 'user-center',
  components: {
    UploadAvatar
  },
  data () {
    const validateNewPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('新密码不能为空'))
      } else if (value.length < 6) {
        callback(new Error('新密码不能少于6位数'))
      } else {
        if (this.password.confimPassword !== '') {
          // 对第二个密码框单独验证
          this.$refs['formItem'].validateField('confimPassword')
        }
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空'))
      } else if (value !== this.password.newPassword) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    return {
      pCheck: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { validator: validateNewPass, trigger: 'blur' }
      ],
      pwdCheck: [
        { required: true, message: '确认密码不能为空', trigger: 'blur' },
        { validator: validatePassCheck, trigger: 'blur' }
      ],
      formItem: {
        mobile: this.$store.state.user.mobile,
        email: this.$store.state.user.email,
        name: this.$store.state.user.userName
      },
      password: {}
    }
  },
  computed: {
    avatar () {
      return this.$store.state.user.avatorImgPath
    }
  },
  methods: {
    show () {
      this.$refs['su'].show()
    },
    save () {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          updateUser(this.formItem).then(res => {
            if (res.code === 200) {
              this.$Message.success('密码修改成功')
              this.refresh()
            }
          })
        }
      })
    },
    refresh () {
      store.dispatch('getUserInfo').then(user => {
        // 拉取用户信息，通过用户权限和跳转的页面的name来判断是否有权限访问;access必须是一个数组，如：['super_admin'] ['super_admin', 'admin']
      })
    },
    update () {
      this.$refs['password'].validate((valid) => {
        if (valid) {
          updatePassword(this.password).then(res => {
            if (res.code === 200) {
              this.$Message.success('密码修改成功')
              this.password = {}
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
